<template>
  <div class="swipe-tabs">
    <div v-for="item in tabs" :key="item.key" class="swipe-tab" :class="{'active': item.key === active}" @click="tabSwitch(item)">
      {{item.value}}
    </div>
    <div class="swipe" :style="swipeStyle"></div>
  </div>
</template>

<script>
import { swipeTabs } from '@/consts/mock'
export default {
  data() {
	  return {
      tabs: swipeTabs,
      active: 0,
	  }
  },
  computed: {
    swipeStyle() {
      let pos = this.active * 180 + 36
      return {
        left: pos * 100 / 1920 + 'vw'
      }
    }
  },
  methods: {
    tabSwitch(item) {
      this.active = item.key
    }
  },
}
</script>

<style lang="stylus">
.swipe-tabs {
	width: getPx(1076);
	height: getPx(92);
  position: relative;
	background-color: #fbf0ee;
	box-shadow: 0 getPx(8) getPx(8) 0 rgba(0, 0, 0, 0.08);
  flexMiddle(space-around);
  .swipe-tab {
    cursor: pointer;
    width: getPx(90);
    height: 100%;
    font-size: $sec-title-font-size;
    color: $swipe-color;
    flex: 1;
    flexMiddle(center);
    &.active {
      color: $black;
    }
  }
  .swipe {
    position: absolute;
    width: getPx(105);
    height: getPx(5);
    background-color: #e03224;
    bottom: 0;
    left: getPx(33);
    transition: all $trans-time;
  }
}
</style>